.banner {
  margin-bottom: 2em;

  img {
    width: 100%;
  }
}

.title {
  position: relative;
  top: -.7em;
  width: 56%;
  margin: 0 auto;
  background-color: #fff;
  font-size: 1.5em;
  text-align: center;
  color: #1c91dd;
}

/* 风险评估 */
.function {
  border-top: 1px solid #ccc;

  .title {
    position: relative;
    top: -.7em;
    width: 30%;
    margin: 0 auto;
    background-color: #fff;
    font-size: 1.5em;
    text-align: center;
    color: #1c91dd;
  }

  .list {
    padding: 0;
    display: flex;
    justify-content: space-around;

    li {
      list-style: none;
      width: 25%;
      text-align: center;
      div {
        width: 5em;
        height: 5em;
        border-radius: 50%;
        margin: 0 auto;
        
        line-height: 5em;
        img {
          // width: 80%;
          height: 65%;
        }
      }

      p {
        margin-top: .5em;
        font-size: 1em;
        font-family: "微软雅黑";
      }
    }

    li:nth-of-type(1) {
      div {
        background-color: #1c91dd;
      }
    }

    li:nth-of-type(2) {
      div {
        background-color: #21b06e;
      }
    }

    li:nth-of-type(3) {
      div {
        background-color: #fab400;
      }
    }

    li:nth-of-type(4) {
      div {
        background-color: #ab5de9;
      }
    }
  }
}

/* 专业咨询 */
.major {
  margin-top: 1em;
  margin-bottom: 2em;
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    li {
      width: 33.3%;
      list-style: none;
      

      img {
        width: 100%;
      }

      div {
        padding-left: 1em;
        h4 {
          font-family: "黑体";
        }

        p {
          color: #666;
          font-size: .7em;
        }
      }
    }

    li:nth-of-type(even) {
      background-color: #f5f5f5;
    }
  }
}

/* 人体工学介绍与应用 */
.human {
  border-top: 1px solid #ccc;

  .info {
    position: relative;
    width: 100%;
    height: 9em;

    img {
      width: 100%;
      height: 100%;
    }

    .cont {
      position: absolute;
      left: 0;
      top: 0;
      transform: translateX(-100%);
      width: 40%;
      height: 100%;
      background-color: rgba(0, 0, 0, .6);
      color: #fff;
      padding: 1em;
      transition: all .5s;

      h4 {
        font-size: 1.2em;
        font-weight: 700;
      }

      span {
        display: inline-block;
        width: 3.5em;
        height: 1.5em;
        border: 1px solid #fff;
        text-align: center;
        line-height: 1.5em;
        margin-top: .2em;
      }
    }

    &:hover {

      .cont {
        transform: translateX(0%);
      }
      
    }
  }

  
}

/* 职业应用 */
.profession {
  margin-top: .8em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .app,
  .personal {
    width: 49.5%;
    height: 3.5em;
    line-height: 3.5em;
    text-align: center;

    span {
      color: #fff;
      margin-left: .3em;
      font-weight: 700;
    }
    img {
      height: 70%;
      vertical-align: middle;
    }

  }


  .app {
    background-color: #55acee;
  }

  .personal {
    background-color: #3b5998;
  }



  .other {
    margin-top: .3em;
    width: 100%;
    height: 3.5em;
    background-color: #363a42;
    text-align: center;
    line-height: 3.5em;

    span {
      color: #fff;
      margin-left: .3em;
      font-weight: 700;
    }

    img {
      height: 35%;
      vertical-align: middle;
    }
  }
}

.contact {
  margin-top: 1.3em;
  margin-bottom: 6.5em;
  border-top: 1px solid #ccc;
  

  .title {
    width: 30%;
  }

  ul {
    padding: 0;
    li {
      list-style: none;
      // font-size: .8em;
      margin-bottom: .5em;

      span {
        display: inline-block;
        width: 2em;
        height: 2em;
        border: 2px solid #ccc;
        vertical-align: middle;
        text-align: center;
        line-height: 1.5em;
        margin: 0 .5em 0 1em;

        img {
          height: 60%;
        }
      }
    }
  }

  
  .map{
    width: 100%;
    height: 15em;
    overflow: hidden;
  }
}

.nav {
  height: 5em;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;

  ul {
    display: flex;
    padding: 0;
    margin-bottom: 0;

    li {
      padding-top: 1em;
      width: 25%;
      list-style: none;
      text-align: center;
      background-color: #f5f5f5;

      img {
        height: 40%;
      }

      img:nth-of-type(2) {
        display: none;
      }

      p {
        margin-top: .3em;
        color: #666;
        margin-bottom: .1em;
      }


      &:hover {
        text-align: center;
        background-color: #1c91dd;

        p {
          color: #fff;
        }

        img:nth-of-type(2) {
          display: inline-block;
        }

        img:nth-of-type(1) {
          display: none;
        }
      }
    }



  }
}